﻿body {
    text-align: justify;
    text-justify: auto;
}

.hidden {
    display: none;
}

progress.with-text {
    color: inherit;
    vertical-align: text-bottom;
}

.progress-ring-text progress {
    margin-right: 5px;
}

.win-settingsflyout .win-header {
    background-color: #000 !important;
}

.win-header .win-backbutton:hover:active {
    color: #000;
}

.win-settingsflyout {
    border-color: #000;
}

.win-listview {
    height: 100%;
    overflow: visible;
    width: 100%;
}

.win-surface {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
}

.win-viewport {
    position: absolute;
    left: -120px;
}

.list-view-image-wrapper {
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.list-view-image {
    width: 250px;
    height: 352px;
}

.list-view-image-episode-wrapper {
    width: 400px;
    height: 225px;
    overflow: hidden;
}

.list-view-image-episode {
    width: 400px;
    height: 225px;
}

.list-view-position{
    position: relative;
}

.element-description-bottom{
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.5);
    line-height:2em;
}

.element-description-top{
    position: absolute; 
    top: 0; 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.5);
    line-height:2em;
}

body {
    background-color: #da542c;
}

section {
    margin: 0;
    padding: 0;
}

#contenthost {
    height: 100%;
    width: 100%;
}

.fragment {
    /* Define a grid with rows for a banner and a body */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

    .fragment header[role=banner] {
        /* Define a grid with columns for the back button and page title. */
        -ms-grid-columns: 39px 81px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        .fragment header[role=banner] .win-backbutton {
            -ms-grid-column: 2;
            margin-top: 59px;
        }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 3;
            margin-top: 37px;
        }

            .fragment header[role=banner] .titlearea .pagetitle {
                width: calc(100% - 20px);
            }

    .fragment section[role=main] {
        -ms-grid-row: 2;
        height: 100%;
        width: 100%;
    }

@media screen and (-ms-view-state: snapped) {
    .fragment header[role=banner] {
        -ms-grid-columns: auto 1fr;
        margin-left: 15px;
        margin-right: 15px;
    }

        .fragment header[role=banner] .win-backbutton {
            -ms-grid-column: 1;
            margin-bottom: 0;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 76px;
        }

            .fragment header[role=banner] .win-backbutton:disabled {
                display: none;
            }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-bottom: 0;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 68px;
        }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .fragment header[role=banner] {
        -ms-grid-columns: 29px 71px 1fr;
    }
}
